<template>
  <div class="app-container">
    <el-tabs v-model="currentTabName" @tab-click="handleClick">
      <el-tab-pane v-if="checkPermission(permissionRoles.LoadStatis)" label="设备统计" name="LoadStatis">
        <LoadStatis v-if="currentTabName === 'LoadStatis'" />
      </el-tab-pane>
      <el-tab-pane v-if="checkPermission(permissionRoles.AccountStatis)" label="账号统计" name="AccountStatis">
        <AccountStatis v-if="currentTabName === 'AccountStatis'" />
      </el-tab-pane>
      <el-tab-pane v-if="checkPermission(permissionRoles.LoadLog)" label="打点日志" name="LoadLog">
        <LoadLog v-if="currentTabName === 'LoadLog'" />
      </el-tab-pane>
      <el-tab-pane v-if="checkPermission(permissionRoles.ClickLoadLog)" label="点击日志" name="ClickLoadLog">
        <ClickLoadLog v-if="currentTabName === 'ClickLoadLog'" />
      </el-tab-pane>
      <el-tab-pane v-if="checkPermission(permissionRoles.LoadConfig)" label="打点配置" name="LoadConfig">
        <LoadConfig v-if="currentTabName === 'LoadConfig'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import LoadLog from './components/LoadLog'
import LoadStatis from './components/LoadStatis'
import ClickLoadLog from './components/ClickLoadLog'
import LoadConfig from './components/LoadConfig'
import AccountStatis from './components/AccountStatis'
import checkPermission from '@/utils/permission'
export default {
  name: 'Load',
  components: { LoadLog, LoadStatis, ClickLoadLog, LoadConfig, AccountStatis },
  data() {
    return {
      currentTabName: 'LoadStatis',
      permissionRoles: this.$store.state.user.permissionRoles
    }
  },
  methods: {
    checkPermission,
    handleClick() {
    }
  }
}
</script>
